<template>
  <div>
    <!--标题栏-->
    <van-nav-bar class="page-nav-bar" title="标题">
      <i slot="left" class="toutiao toutiao-zuojiantou" @click="$router.back()"></i>
    </van-nav-bar>
    <!--登录表单-->
    <van-form @submit="onLogin" ref="loginForm">
      <van-field type="number" maxlength="11" v-model="user.mobile" name="mobile" :rules="loginRules.mobile" left-icon="smile-o"  placeholder="请输入手机号码">
        <i slot="left-icon" class="toutiao toutiao-shouji"></i>
      </van-field>
      <van-field type="number" maxlength="6" v-model="user.code" :rules="loginRules.code" name="code" placeholder="请输入验证码">
        <i slot="left-icon" class="toutiao toutiao-yanzhengma"></i>
        <template #button>
          <van-count-down :time="time" format="ss s" v-if="isCountDownShow" @finish="isCountDownShow = false" />
          <van-button v-else class="send-msg-btn" native-type="button" size="small" type="primary" @click="sendSms">发送验证码</van-button>
        </template>
      </van-field>
      <div class="login-btn-wrap">
        <van-button class="login-btn" block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { login, getCode } from '@/api/user.js'
export default {
  data () {
    return {
      isCountDownShow: false,
      imgUrl:'avatar.png',
      time: 6 * 1000,
      user: {
        mobile: '',
        code: ''
      },
      loginRules: {
        mobile: [
          {
            required: true,
            message: '请输入手机号码'
          },
          {
            pattern: /^1\d{10}$/,
            message: '手机格式错误'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码'
          },
          {
            pattern: /^\d{6}$/,
            message: '验证码格式错误'
          }
        ]
      }
    }
  },
  methods: {
    async onLogin () {
      this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      // 表单验证
      // 发送请求
      try {
        const res = await login(this.user)
        // 登录成功
        this.$toast.success('登录成功')
        this.$router.push('/')
        this.$store.commit('setUser', res.data.data)
      } catch (error) {
        if (error.response.status === 400) {
          this.$toast('手机号或验证码错误')
        }
      }
      // 处理结果
    },
    async sendSms () {
      // 1.验证手机号是否正确
      try {
        await this.$refs.loginForm.validate('mobile')
      } catch (error) {
        return console.log(error)
      }
      // 2.调用API接口进行验证
      try {
        await getCode(this.user.mobile)
      } catch (error) {
        if (error.response.status === 429) {
          this.$toast('请求过于频繁')
        }
      }

      // 3.开启倒计时
      this.isCountDownShow = true
    }
  }
}
</script>
<style lang="less">
.toutiao {
  font-size: 37px;
  height: 37px;
  line-height: 37px;
}
.send-msg-btn {
  width: 152px;
  height: 46px;
  background-color: #ededed;
  border-radius: 23px;
  border: none;
}
.login-btn-wrap {
  padding: 53px 33px;
  .login-btn {
    background-color: #6db4fb;
    border: none;
  }
}
</style>
